<template>
  <div style="height: 73vh">
    <div style="height: 40vh">
      <div class="h50 ml10">
        奖金总额：<span class="font22 blue">{{ $formatNum(this.fpData.jjZe == undefined ? 0 : this.fpData.jjZe) }}</span><span class="ml30">奖金余额：</span><span class="font22 blue">{{ $formatNum(this.fpData.jjYe == undefined ? 0 : this.fpData.jjYe) }}</span>
        <el-button type="primary" plain @click="jjzjFromOpen()" class="ml30">追加奖金</el-button>
      </div>
      <el-table :data="jjxData" stripe width="100%" class="avue-crud" height="85%">
        <el-table-column type="index" width="80px" label="序号" align="center"></el-table-column>
        <el-table-column prop="jjxName" label="奖金项名称" min-width="100px"></el-table-column>
        <el-table-column prop="fpJj" label="分配奖金(元)" min-width="120px">
          <template slot-scope="scope">{{ $formatNum(jeData[scope.row.jjxId].fpJj) }}</template>

        </el-table-column>
        <el-table-column prop="zjJj" label="追加奖金(元)" min-width="120px">
          <template slot-scope="scope">{{ $formatNum(jeData[scope.row.jjxId].zjJj) }}</template>
        </el-table-column>
        <el-table-column prop="jjZe" label="奖金总额(元)" min-width="120px">
          <template slot-scope="scope">{{ $formatNum(jeData[scope.row.jjxId].jjZe) }}</template>
        </el-table-column>
        <el-table-column prop="jjYe" label="奖金余额(元)" min-width="120px">
          <template slot-scope="scope">{{ $formatNum(jeData[scope.row.jjxId].jjYe) }}</template>
        </el-table-column>
        <el-table-column prop="bmJj" label="部门已分配(元)" min-width="120px">
          <template slot-scope="scope">{{ $formatNum(jeData[scope.row.jjxId].bmJj) }}</template>
        </el-table-column>
        <el-table-column prop="ygJj" label="员工已分配(元)" min-width="120px">
          <template slot-scope="scope">{{ $formatNum(jeData[scope.row.jjxId].ygJj) }}</template>
        </el-table-column>
        <el-table-column prop="dxFp" label="定向已分配(元)" min-width="120px">
          <template slot-scope="scope">{{ $formatNum(jeData[scope.row.jjxId].dxFp) }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 40vh" class=" mt10">
      <el-table :data="rowData" stripe width="100%" class="avue-crud" height="85%">
        <el-table-column type="index" width="80px" label="序号"></el-table-column>
        <el-table-column prop="jjxMc" label="奖金项名称" min-width="150px"></el-table-column>
        <el-table-column prop="jjCjlx" label="奖金类型" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.jjCjlx == 1 ? "主要奖金" : "追加奖金" }}
          </template>
        </el-table-column>
        <el-table-column prop="jjJe" label="奖金金额(元)" min-width="120px">
          <template slot-scope="scope">
            {{ $formatNum(scope.row.jjJe) }}
          </template>
        </el-table-column>
        <el-table-column prop="yxqz" label="过期时间" min-width="120px">
          <template slot-scope="scope">
            {{ $moment(scope.row.yxqz).format("yyyy-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button type="danger" plain @click="deleteHandle(scope.row)" v-if="scope.row.jjCjlx == 2">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <jjzjFrom ref="jjzjFrom" @refreshDataList="getFpxx"></jjzjFrom>
  </div>
</template>

<script>
import {getObj} from '@/api/jiangjin/jiangjinfpjjfpdjb'
import jjzjFrom from "./jiangjinfpjjfpdjb-jjly-form";
import {getSyList} from '@/api/jiangjin/jiangjinfpjjsydjb'
import {deleteJjzj} from '@/api/jiangjin/jiangjinfpjjlydjb'


export default {
  components: {
    jjzjFrom
  },
  data() {
    return {
      fpId: 0,
      fpData: {},// 分配信息
      jjxData: [],// 奖金项信息
      jeData: {},// 金额信息
      rowData: []//追加奖金list
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    csh() {
      this.fpId = 0;
      this.fpData = {};
      this.jjxData = [];
      this.jeData = {};
      this.rowData = [];
    },
    init(fpId) {
      this.csh();
      this.fpId = fpId;
      this.$nextTick(() => {
        this.getFpxx();
      })
    },
    //读取分配表信息
    getFpxx() {
      getObj(this.fpId).then(response => {
        this.fpData = response.data.data;
        this.jjxData = JSON.parse(response.data.data.jjxXq);
        this.jeData = JSON.parse(response.data.data.jjxJeXq);
      })

      getSyList(this.fpId).then(response => {
        this.rowData = response.data.data;
      })
    },
    //奖金追加
    jjzjFromOpen() {
      this.$nextTick(() => {
        this.$refs.jjzjFrom.init(this.fpData.id, this.fpData.jjDeptId)
      });
    },
    // 删除
    deleteHandle(row) {
      var _this = this;
      if (row.jjJe > this.fpData.jjYe) {
        this.$message.closeAll();
        this.$message.error("删除后余额不足，无法删除！");
        return;
      }

      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return deleteJjzj(_this.fpId, row.id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getFpxx()
      })
    },
  }
}
</script>
